<template>
  <div class="setting">
    <van-nav-bar fixed @click-left="back">
      <template #left>
        <i class="m_fs18 iconfont icon-fanhui"></i>
      </template>
      <template #title>
        <div class="title m_fs18 m_fw">设置</div>
      </template>
    </van-nav-bar>

    <div class="group">
      <div class="m_fs14 m_fw group_title">账号相关</div>
      <div class="group_menu">
        <menu-item :tit="'编辑资料'" :val="`代号：${userinfo.username}`" @click="$router.push('/edit')"></menu-item>
        <menu-item :tit="'设置密码'" @click="$router.push('/verify')"></menu-item>
        <menu-item :tit="'手机号'" :val="`${tel}已绑定`" @click="showPhoneDailog"></menu-item>
      </div>
    </div>

    <div class="group">
      <div class="m_fs14 m_fw group_title">帮助和支持</div>
      <div class="group_menu">
        <menu-item :tit="'用户协议'" @click="$router.push({path:'/notice', query: {tit:'用户协议'}})"></menu-item>
        <menu-item :tit="'隐私政策'" @click="$router.push({path:'/notice', query: {tit:'隐私政策'}})"></menu-item>
        <menu-item :tit="'关于我们'" @click="$router.push({path:'/notice', query: {tit:'关于我们'}})"></menu-item>
        <menu-item :tit="'联系客服'" :val="'客服QQ：80009000'" :arrow="false"></menu-item>
      </div>
    </div>

    <div class="group">
      <div class="m_fs14 m_fw group_title">违法和不良信息举报</div>
      <div class="group_menu">
        <menu-item :tit="'电话'" :val="'010-13572468'" :arrow="false"></menu-item>
        <menu-item :tit="'邮箱'" :val="'13572468@qq.com'" :arrow="false"></menu-item>
        <menu-item :tit="'青少年举报电话'" :val="'010-13572468'" :arrow="false"></menu-item>
      </div>
    </div>

    <div class="m_fs16 m_tac account" @click="$router.push({path:'/notice', query: {tit:'注销账号'}})">注销账号</div>

    <div class="m_fs16 m_tac account" @click="logout">退出登录</div>

  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
import MenuItem from '@/components/MenuItem.vue'
export default {
  components:{
    MenuItem
  },
  data(){
    return{
      showDailog: false
    }
  },
  computed: {
    ...mapState('m_user',['userinfo']),
    ...mapGetters('m_user',['tel'])
  },
  methods:{
    ...mapMutations('m_user',['setToken','setUserinfo']),
    // 返回
    back(){
      this.$router.back()
    },
    // 更换绑定手机确认框
    showPhoneDailog(){
      this.$dialog.confirm({
        title: '更改绑定的手机号？',
        message: `当前绑定的手机号为\n${this.tel}`,
        confirmButtonColor: '#008080'
      }).then(() => {
          this.$router.push('/update/phone')
      }).catch(err=>err);
    },
    onClickMenu(){},
    // 退出登录
    logout(){
      localStorage.removeItem('goto')
      this.setToken(false)
      this.setUserinfo(false)
      this.$router.replace('/home')
    }
  }
}
</script>

<style lang="scss" scoped>
.setting{
  background: #f6f6f6;
  padding-top: 50px;
  padding-bottom: 30px;
  .group{
    .group_title{
      line-height: 37px;
      color: #a5a5a5;
      padding: 0 20px;
    }
    .group_menu{
      padding: 0 20px;
      background: #fff;
    }
  }
  .account{
    background: #fff;
    line-height: 50px;
    margin: 8px 0;
  }
}
</style>